<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<script type="text/javascript" src="../js/vue-router-3.4.9.js"></script>

<div id="app">
    <!--<a href="#/login">登录</a>
    <a href="#/reg">注册</a>-->
    <router-link to="/login">登录</router-link>
    <router-link to="/reg">注册</router-link>
    <router-view></router-view>
</div>
<template id="login">
    <div>我是登录表单
        <router-link to="/mobile">手机登录</router-link>
        <router-link to="/username">用户名登录</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="register">
    <form action="" >
        用户名:<input type="text" value=""/>
        密码:<input type="text" value=""/>
        <input type="submit"/>
    </form>
</template>
<template id="mobile">
    <div>我是手机登表单</div>
</template>
<template id="username">
    <div>我是用户名登录表单</div>
</template>
<script>
    const mobile={
        template:"#mobile"
    }
    const username={
        template:"#username"
    }
    const login_form={
        template:"#login"
    }
    const reg_form={
        template:"#register"
    }
    const router=new VueRouter({
        routes:[
            {name:"default",path:"/",redirect:"/login"},
            {name:"login",path:"/login",component:login_form,
                children:[{name:"mobile",path:"/mobile",component:mobile},
                    {name:"username",path:"/username",component:username}
                ]
            },
            {name:"reg",path:"/reg",component:reg_form}
        ]
    });
    const vm = new Vue({
        el:"#app",
        components:{
            login_form,
            reg_form
        },
        router
    })
</script>
</body>
</html>